<template>
  <svg :width="size" :height="size" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" :class="className"
    v-bind="$attrs">
    <path :d="iconPath" :fill="color" :stroke="color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
  </svg>
</template>

<script>
export default {
  name: 'IconView',
  props: {
    name: {
      type: String,
      required: true
    },
    size: {
      type: Number,
      default: 24
    },
    color: {
      type: String,
      default: 'black'
    },
    className: {
      type: String,
      default: ''
    }
  },
  computed: {
    icons () {
      return {
        home: "M4 6H44V36H29L24 41L19 36H4V6Z",  // 示例路径：home 图标
        search: "M23 21H25.0025",  // 示例路径：search 图标
        // 可以继续添加其他图标路径
      };
    },
    iconPath () {
      return this.icons[this.name] || '';
    }
  }
};
</script>

<style scoped>
/* 如果有额外的样式可以写在这里 */
</style>
